/**
 * @Author:周邱艳
 * @Date:2020/6/30
 * @Description:这是底部通告栏
 */
import React,{Component} from "react";
import {NoticeBar, WhiteSpace, Icon, Card, Tag, Badge} from 'antd-mobile';
import axios from 'axios'
import {URL} from '../../../index'
var data_list=[] //全部的产品数组

// 将获取的数据中属性为数字的转换为文字
function numberName(newList){
    for(let i=0;i<newList.length;i++) {
        //规范组合产品的收益率
        var ratio = newList[i].totalIncomeRadio;
        newList[i].totalIncomeRadio = Number(ratio*100).toFixed(2)+"%";
        //修改组合产品类型
        switch (newList[i].comBaseCate) {
            case 1:
                newList[i].comBaseCate = "股票型";
                break;
            case 2:
                newList[i].comBaseCate = "基金型";
                break;
            case 3:
                newList[i].comBaseCate = "混合型";
                break;
        }
        //修改组合产品风险等级
        switch (newList[i].comBaseRiskLevel) {
            case 1:
                newList[i].comBaseRiskLevel ="谨慎型";
                break;
            case 2:
                newList[i].comBaseRiskLevel ="稳健型";
                break;
            case 3:
                newList[i].comBaseRiskLevel ="平衡型";
                break;
            case 4:
                newList[i].comBaseRiskLevel ="进取型";
                break;
            default:
                newList[i].comBaseRiskLevel ="激进型";
                break;
        }
        //修改组合产品的状态
        switch (newList[i].isUsed) {
            case 0:
                newList[i].isUsed ="已下架";
                break;
            case 1:
                newList[i].isUsed="预售";
                break;
            case 2:
                newList[i].isUsed ="正在运行";
                break;
        }
    }
    return newList;
};

export default class ProductCard extends Component{
    constructor(props) {
        super(props);
        this.state = {
            disabled: false,
            combinationList:[],//json表名
            data_list:[],

        }
        this.getData=this.getData.bind(this)
    }
    //获取数据
    getData(){
        axios({
            method:"GET",
            url:"http://39.101.141.248:9527/combinationBaseInfo/getCombinationDetailInfo",
            params:{comBaseId:this.props.fathercomBaseId}
        }).then(
            (res)=>{
                if(res.data.code===200){
                    data_list=numberName(res.data.combinationList) //将对象内的数字属性转化为文字
                    var productName=data_list[0]["comBaseName"]
                    var totalIncomeRadio=data_list[0]["totalIncomeRadio"]
                    var comBaseRiskLevel=data_list[0]["comBaseRiskLevel"]
                    var isUsed=data_list[0]["isUsed"]
                    var comBaseCate=data_list[0]["comBaseCate"]

                    this.setState({
                        data_list:data_list,
                        productName:productName,//产品名
                        totalIncomeRadio:totalIncomeRadio,//累计收益率
                        comBaseRiskLevel:comBaseRiskLevel,//风险等级
                        isUsed:isUsed,//组合状态
                        comBaseCate:comBaseCate//组合类别

                    })
                }
            }
        ).catch(function (error) {//异常处理
            console.log(error)

        })


    }
    componentDidMount() {
        this.getData()
    }


    render() {
        return (
            <div>
                {/*产品名card*/}
                <WhiteSpace />
                <WhiteSpace />
                <WhiteSpace />
                <WhiteSpace size="lg" />
                <WhiteSpace size="lg" />
                <Card>
                    <Card.Header
                        title={this.state.productName}
                        extra={<div>
                            <Tag style={{color:"#f8a83f",fontSize:"12px"}} >{this.state.comBaseCate}</Tag>
                        </div>}
                    />
                    <Card.Body>
                        <div className="data1">

                            <div className="data4">
                                <p style={{fontSize:"24px",color:"#f8a83f"}}>
                                    {this.state.totalIncomeRadio}
                                </p>
                                <p style={{fontSize:"13px",color:"grey",marginTop:"0.25rem"}}>成立以来收益率</p>
                            </div>
                            <div className="data4">
                                <p style={{fontSize:"16px",marginTop:"0.3rem",marginLeft:"2.5rem"}}>
                                    {this.state.comBaseRiskLevel}
                                </p>
                                <p style={{fontSize:"13px",color:"grey",marginTop:"1rem",marginLeft:"2.5rem"}}>风险等级</p>
                            </div>
                            <div className="data4">
                                <p style={{fontSize:"16px",marginTop:"0.3rem",marginLeft:"2.5rem"}}>
                                    {this.state.isUsed}

                                </p>
                                <p style={{fontSize:"13px",color:"grey",marginTop:"1rem",marginLeft:"2.5rem"}}>组合状态</p>
                            </div>
                        </div>
                    </Card.Body>
                </Card>
                <WhiteSpace size="lg" />

            </div>
        );
    }
}
